<template>

	<el-table :data="tableData" style="width: 100%" id="tableId" border table-layout="fixed">
		<el-table-column label="角色名称">
			<template #default="scope">
				<div style="display: flex; align-items: center">
					<span style="margin-left: 10px">{{ scope.row.name }}</span>
				</div>
			</template>
		</el-table-column>
		<el-table-column label="角色状态">
			<template #default="scope">
				<el-tag>{{ scope.row.status }}</el-tag>
			</template>
		</el-table-column>
		<el-table-column label="创建时间">
			<template #default="scope">
				{{ scope.row.date }}
			</template>
		</el-table-column>
		<el-table-column label="操作">
			<template #default="scope">
				<el-button  size="small" @click="setMenu(scope.$index, scope.row)">分配菜单</el-button>
				<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
				<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<roleModal  ref="rmodal"></roleModal>
	<menuModal  ref="menumodal"></menuModal>
</template>

<script lang="ts" setup>
import roleModal from './components/role-modal.vue';
import menuModal from './components/menu-modal.vue';

import { ref } from 'vue';
const rmodal = ref(null);
const menumodal = ref(null);

interface User {
	name: string;
	status: string;
	date: string;
}

const handleEdit = (index: number, row: User) => {
	rmodal.value.showModal(row);
};
const setMenu = (index: number, row: User) => {
	menumodal.value.showModal(row);
};
const handleDelete = (index: number, row: User) => {
	console.log(index, row);
};

const tableData: User[] = [
	{
		name: '超级管理员',
		status: '启用',
		date: '2022-10-1'
	},
	{
		name: '系统管理员',
		status: '启用',
		date: '2022-10-1'
	},
	{
		name: '前端开发',
		status: '启用',
		date: '2022-10-1'
	},
	{
		name: '后端开发',
		status: '启用',
		date: '2022-10-1'
	},
	{
		name: 'ui设计师',
		status: '启用',
		date: '2022-10-1'
	},
	{
		name: '产品经理',
		status: '启用',
		date: '2022-10-1'
	},
	{
		name: '测试工程师',
		status: '启用',
		date: '2022-10-1'
	},
	{
		name: '运维工程师',
		status: '启用',
		date: '2022-10-1'
	},
	{
		name: '数据库工程师',
		status: '启用',
		date: '2022-10-1'
	},
	{
		name: '行政人员',
		status: '启用',
		date: '2022-10-1'
	},
	{
		name: '运营人员',
		status: '启用',
		date: '2022-10-1'
	}
];

</script>
